<template>
  <div class='room-item'>
    <div class="item-1">
      <t-space>
        <t-avatar size="42px" image="https://tdesign.gtimg.com/site/avatar.jpg" />

        <div class="item-title">
          <div>Title</div>
          <span>desc</span>
        </div>
      </t-space>
    </div>

    <div class="item-2">
      <div>time</div>
      <t-dropdown :options="options" @click="clickHandler">
        <t-button theme="default" variant="outline" shape="square">
          <t-icon name="ellipsis" size="16" />
        </t-button>
      </t-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ROOM_LIST_OPT } from '../utlis/common';

const porps = defineProps({
  room: {
    type: Object,
    default: () => ({}),
  },
  avatar: {
    type: String,
    default: '',
  },
  name: {
    type: String,
    default: '',
  },
  isSelected: {
    type: Boolean,
    default: false,
  },
  desc: {
    type: String,
    default: '',
  },
  timestamp: {
    type: String,
    default: '',
  }
});


const options = ref(ROOM_LIST_OPT);

const clickHandler = (v: string) => {
  console.log('v', v);
}


</script>

<style scoped>
.room-item {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;

  padding: 0 14px;
  min-height: 71px;
  cursor: pointer;
}

.room-item:not(.room-selected):hover {
  background-color: #f6f6f6;
}

.room-selected {
  background-color: rgb(229, 239, 250);
}

.item-1 {
  display: flex;
}

.item-title {}
</style>
